<template>
  <div class="main">
    <div class="content">
      <div class="top">
        <div class="box" id="name">
          <div class="left">客户姓名</div>
          <input type="text" v-model="name" class="text_input">
        </div>
        <div class="box" id="phonenumber">
          <div class="left">联系电话</div>
          <input type="text" v-model="phone" class="text_input">
        </div>
      </div>
      <div class="bottom">
        <div @click="confirm" class="button submit">提交等待申请</div>
      </div>
    </div>
  </div>
</template>

<script>
    import aftersalesService from "../../service/aftersales";
    export default {
        name: "ApplyForaDelayInDelivery",
      data () {
          return {
            name: null,
            phone: null,
            goodsVo: null
          }
      },
      mounted() {
          this.goodsVo = this.$route.params.goodsVo
      },
      methods: {
          async confirm() {
            if (this.goodsVo == null) {
              alert("刷新页面失去数据")
              this.$router.push({name:'BeforeSales'})
              return
            }
            if (this.phone==null||this.name==null) {
              alert("请填写完整信息")
              return
            }
            const data = {
              phone: this.phone,
              customer: this.name,
              returnGoodsVO: this.goodsVo
            }
            let result = await aftersalesService.applyfordelay(data)
            if (result.data.code == 2000)
              alert(result.data.data)
            else{
              alert(result.data.data)
            }
            this.$router.push({name: 'BeforeSales'})
          }
      }
    }
</script>

<style lang="scss" scoped>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"]{
    -moz-appearance: textfield;
  }
  .main {
    width: 100%;
    height: calc(100% - 1px);
    background: #FFFFFF;
    border-top: 1px solid transparent;
    .content {
      width: 406px;
      left: 128px;
      margin: 0 auto;
      .top {
        width: 100%;
        .box {
          width: 100%;
          height: 25px;
          margin-top: 10px;
          .left {
            height: 25px;
            line-height: 25px;
            width: 106px;
            float: left;
            text-align: left;
            font-size: 14px;
          }
          .text_input {
            border-width: 1px;
            width: 298px;
            height: 23px;
          }
          .notselect {
            cursor: default;
          }
        }
      }
      .bottom {
        width: 100%;
        height: 42px;
        .button {
          margin: 20px auto;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 13px;
          border-radius: 10px;
          border: 1px solid black;
        }
        .button:hover {
          background: #c1e8ff;
          cursor: pointer;
        }
        .cancel {
          width: 112px;
          float: left;

        }
        .submit {
          width: 170px;
          float: right;
        }
      }
    }
  }
</style>
